<template>
    <div class="user-main">
        <div class="user-content">
            <div class="user-header">
                <div class="header-wrapper" @click="loginRegAction">
                <div class="user-icon"><img src="~assets/image/user/header.png" alt="用户头像"></div>
                <p>{{userName}}</p>
                </div>
            </div>
            <div class="content-wrapper">
                <nuxt-link to="/user/history">
                    <div class="cell-item">
                        <div class="left justify-align-center"><img slot="icon" src="~assets/image/user/history.png" width="24" height="24"></div>
                        <div class="center align-center">浏览历史</div>
                        <div class="right justify-align-center"><img src="~assets/image/bookstore/more.png" alt=""></div>
                    </div>
                </nuxt-link>
                <div class="line"></div>
                <nuxt-link to="/user/changePsd" v-if="userName!='登录/注册'">
                    <div class="cell-item">
                        <div class="left justify-align-center"> <img slot="icon" src="~assets/image/user/changepsd.png" width="24" height="24"></div>
                        <div class="center align-center">修改密码</div>
                        <div class="right justify-align-center"><img src="~assets/image/bookstore/more.png" alt=""></div>
                    </div>
                </nuxt-link>
                <div class="line" v-if="userName!='登录/注册'"></div>
                <nuxt-link to="/user/myMoney" v-if="userName!='登录/注册'">
                    <div class="cell-item">
                        <div class="left justify-align-center"><img slot="icon" src="~assets/image/user/money.png" width="24" height="24"></div>
                        <div class="center align-center">我的现金<span class="new-icon">New</span><span class="count">{{balance}}</span></div>
                        <div class="right justify-align-center"><img src="~assets/image/bookstore/more.png" alt=""></div>
                    </div>
                </nuxt-link>
                <div class="split"></div>
                <nuxt-link to="/user/disclaimer">
                    <div class="cell-item">
                        <div class="left justify-align-center"><img slot="icon" src="~assets/image/user/mzsm.png" width="24" height="24"></div>
                        <div class="center align-center">免责声明</div>
                        <div class="right justify-align-center"><img src="~assets/image/bookstore/more.png" alt=""></div>
                    </div>
                </nuxt-link>
                <div class="line"></div>
                <nuxt-link to="/user/about">
                    <div class="cell-item">
                        <div class="left justify-align-center"><img slot="icon" src="~assets/image/user/about.png" width="24" height="24"></div>
                        <div class="center align-center">关于我们</div>
                        <div class="right justify-align-center"><img src="~assets/image/bookstore/more.png" alt=""></div>
                    </div>
                </nuxt-link>
                <div class="line"></div>
                <nuxt-link to="/user/privacy">
                    <div class="cell-item">
                        <div class="left justify-align-center"><img slot="icon" src="~assets/image/user/ystk.png" width="24" height="24"></div>
                        <div class="center align-center">隐私条款</div>
                        <div class="right justify-align-center"><img src="~assets/image/bookstore/more.png" alt=""></div>
                    </div>
                </nuxt-link>
                <div class="line"></div>
                <nuxt-link to="/user/advise">
                    <div class="cell-item">
                        <div class="left justify-align-center"><img slot="icon" src="~assets/image/user/yjfk.png" width="24" height="24"></div>
                        <div class="center align-center">意见反馈</div>
                        <div class="right justify-align-center"><img src="~assets/image/bookstore/more.png" alt=""></div>
                    </div>
                </nuxt-link>
                <button type="button" class="signOut" @click="signOutAction" v-if="userName!='登录/注册'">退出登录</button>
            </div>
        </div>
        <ComFooter :selectedIndex="2"></ComFooter>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import api from '~/plugins/api.js'
    import axios from 'axios'
    import storage from 'localforage'
    export default {
        head: {
            title: "用户中心 - 快眼看书",
            meta: [{
                name: "description",
                content: "快眼看书专注于玄幻小说搜索,新版快眼看书,提供最全的小说保持最快的更新,方便大家愉快地阅读玄幻小说"
            },{
                name: "keyWords",
                content: "用户中心,快眼看书"
            }]
        },
        data () {
            return {
                headerConfig: {
                    showBackButton: true, // 头部返回上一页按钮
                    showCompleteBtn: true,// 确定按钮是否显示
                    title: '通用模板页头部标题'
                },
                userInfo: {},
                userName: '登录/注册',
                balance: '0.00',
                
            }
        },
        mounted() {
            this.initData()
        },
        methods: {
            async initData() {    
                this.userInfo = await storage.getItem('userinfo')
                if(this.userInfo){
                    this.userName = this.userInfo.username
                    this.getMyBalance()
                }
            },
            loginRegAction() {
                if(this.userName == '登录/注册'){
                   this.$router.push('/loginReg')
                }
            },
            async signOutAction() {
                await storage.removeItem('userinfo')
                await storage.removeItem('bookshelfIdKey')
                //await storage.clear()
                this.userName = '登录/注册'
            },
             /**
             * 账户余额
             */
            async getMyBalance() {
                let paramsData = {
                    uid: this.userInfo.uid,
                    token: this.userInfo.token
                }
                let result = await axios.get(api.myBalance,{params:paramsData})
                if(result) {
                    this.balance = result.data.data.balance
                }
            },
            
        }
    }
</script>
